-
Notifications
You must be signed in to change notification settings - Fork 395
Floating Menus - UI rework #5980
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
- floating ui elements, refactor layout - move app menu to sidebar - add log in button - remove bottom menu setting - remove second row tabs setting
Fix window overflow issues
This reverts commit 6fe4920.
- fix extra splitter with sidebar open - update components bg to use menu not secondary
More resizing changes
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 10/16/2025, 07:14:14 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 10/16/2025, 07:30:48 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
|
This will be an option, right ? |
- fix focus mode in old menu mode - fix sizing with custom extension panels
- fix drag destination
🔧 Auto-fixes AppliedThis PR has been automatically updated to fix linting and formatting issues.
Changes made:
|
|
There is one failing test, this looks like a legit issue with bypassing nodes not correctly updating on the minimap but not related to these changes |
@JorgeR81 we actually explored quite a few options, including integrating some of these menus into the left sidebar. In the end, we decided to go with the current design, but we’ll definitely keep your suggestions in mind for future iterations. This certainly won’t be the last UI update we do 🙂 Really appreciate how much thought you’re putting into this, it’s awesome to see people care so much about Comfy and its UX! |
|
@codex review |
|
Codex Review: Didn't find any major issues. 🎉 ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. Codex can also answer questions or update the PR. Try commenting |
## Summary
Enhancing and further modernizing the UI, giving users more usable area
whilst keeping farmiliar positioning and feel of elements.
## Changes
- **What**: Significant restructure of the UI elements, changing
elements from large blocks to floating elements, updating:
- Side toolbar menu (floating style, supports small/normal mode,
combines to scroll on height overflow)
- Bottom tabs panel (floating style, tabs redesigned)
- Action bar (support for docking/undocking menu)
- Added login/user menu button to top right
- Restyled breadcrumbs (still collapse when overflows)
- Add litegraph support for fps info position (so it isn't covered by
the sidebar)
- **Breaking**:
- Removed various elements and added new ones, I have tested custom
sidebars, custom actions, etc but if scripts are inserting elements into
"other" elements they may have been (re)moved.
- Remove support for bottom menu
- Remove support for 2nd-row tabs
## Screenshots
<img width="1116" height="907" alt="ui"
src="https://github.com/user-attachments/assets/b040a215-67d3-4c88-8c4d-f402a16a34f6"
/>
https://github.com/user-attachments/assets/571dbda5-01ec-47e8-b235-ee1b88c93dd0
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5980-Floating-Menus-UI-rework-2866d73d3650810aac60cc1afe979b60)
by [Unito](https://www.unito.io)
---------
Co-authored-by: GitHub Action <[email protected]>
Co-authored-by: github-actions <[email protected]>
|
I agree with @JorgeR81. The floating elements definitely add a modern feel to ComfyUI but the non-floating topbar seems to clash with the floating menus. Especially with the active workflow tab having the same exact text displayed as the floating button to manage the workflow, it seems redundant. (I know the floating text expands to show subgraphs when expanded)
I wonder if we could make the topbar disappear until the mouse hovers over that area - not dissimilar to the "Hide taskbar" setting on Windows. That way, we avoid the redundancy and extra screen space taken for 95% of the use and when a user needs to open a new workflow tab, the topbar will still be there. Also, separate issue, but I think the login button belongs in the settings. For users that don't want to use the API nodes, it seems a bit obtrusive to have a large persistent "Log In" button that just stays at the top right of the screen. @PabloWiedemann @pythongosssss - thoughts? |
Yeah, this would be nice, in the near term. But in the long term, I think the only way to please all users ( new and advanced alike ) would be to give them the ability to "build" their own GUI, ( like we do with nodes ! ). Basically, allowing to combine floating menus, and to dock all menus in any edge. I go in detail in here: #6104 (comment) |
|
The progress bar in comfyui-crystools is broken, now there are only unaligned numbers and percentages |
Fixes #6130 -- node previews are not positioned in correct location after #5980 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6232-fix-node-hover-previews-overlapping-with-sidebar-2956d73d365081b2a470f7fb399fda99) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <[email protected]>
… tabs (#6515) ## Summary Fixes missing cloud badges and server health alerts when workflow tabs are in the second-row position. ## Problem Badges were only visible when `Comfy.Workflow.WorkflowTabsPosition` was set to `'Topbar'`, but not when set to `'Topbar (2nd-row)'` which is the **default for screens < 1536px wide** on rh-test. The `SecondRowWorkflowTabs.vue` component only rendered `<WorkflowTabs />` but was missing `<TopbarBadges />`. ## Changes - Added `<TopbarBadges />` component to `SecondRowWorkflowTabs.vue` - Updated container to use flex layout to match other topbar badge implementations - Badges now display in both 'Topbar' and 'Topbar (2nd-row)' positions ## Testing - Cloud badges should now be visible on screens < 1536px wide (default setting) - Server health alerts from remote config should display properly in second-row tabs ## Note This is an **rh-test only** issue. The main branch removed the 'Topbar (2nd-row)' option in the Floating Menus PR (#5980). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6515-fix-add-cloud-badges-and-server-health-alerts-to-second-row-workflow-tabs-29e6d73d365081c4a4defaf97d2e789e) by [Unito](https://www.unito.io) Co-authored-by: Christian Byrne <[email protected]>

Summary
Enhancing and further modernizing the UI, giving users more usable area whilst keeping farmiliar positioning and feel of elements.
Changes
What: Significant restructure of the UI elements, changing elements from large blocks to floating elements, updating:
Side toolbar menu (floating style, supports small/normal mode, combines to scroll on height overflow)
Bottom tabs panel (floating style, tabs redesigned)
Action bar (support for docking/undocking menu)
Restyled breadcrumbs (still collapse when overflows)
Add litegraph support for fps info position (so it isn't covered by the sidebar)
Breaking:
Removed various elements and added new ones, I have tested custom sidebars, custom actions, etc but if scripts are inserting elements into "other" elements they may have been (re)moved.
Remove support for bottom menu
Remove support for 2nd-row tabs
Screenshots
floating.ui.mp4
┆Issue is synchronized with this Notion page by Unito